Use grids to guide layouts 使用網格系統指導佈局

佈局中的網格

在設計原型圖時，正確放置頁面元素非常重要。一個合理的佈局能改善使用者流程，讓介面更容易導航。但對於初學者來說，如何定位元素可能是個難題。

基礎網格

• 基礎網格是由均勻間距的縱橫線組成，把頁面劃分為一個個小方塊。

• 它能幫助你保持設計的一致性，便於元素對齊和間距控制。

• 在 Figma 中可以啟用基礎網格，類似於你可能在早期課程中使用過的網格紙。

佈局網格

相比基礎網格，佈局網格是更常見的工具。它由 列（columns）和間隙（alleys）組成：

列：用來放置主要設計元素，通常為淺紅色；

間隙：是列與列之間的留白，通常為白色。

不同裝置的列數差異：

• 網頁/桌面端：通常為 12 列；

• 平板或 App 端：約為 4–8 列；

• 智慧手錶介面：通常只使用 1 列；

列數的選擇不是固定的，而是根據你想如何組織內容來決定。

如何選擇使用哪種網格？

• 有些設計師會同時使用基礎網格與佈局網格；

• 有些設計師選擇其一，甚至不使用網格；

• 作為初學者，建議使用網格，原因：

1. 清晰性與一致性：網格能引導使用者視線，提升可讀性；

2. 提升效率：更快定位和放置元素；

3. 方便協作：統一結構讓團隊成員更容易理解設計邏輯。

網格使用示例：Peacock App 原型

以下是來自一位初級設計師 Dane 的案例，他設計了一款名為 Peacock 的應用。

頁面內容：使用者可搜尋附近的朋友或地點；

設計細節：搜尋欄位於頁面正中上方；下方展示的城市圖片（紐約、舊金山、芝加哥）大小完全一致，排布整齊。

可以明顯看出 Dane 使用了網格來規劃頁面佈局，結果是頁面整潔、美觀，使用者體驗良好。

此外，這樣的佈局還可以複用於其他產品場景，比如美食外賣 App，每個圖片框可以代表一家餐廳。